<!--
  功能：这是角色页面
  作者：menghao.yan
  邮箱：yxs2615@163.com
  时间：2022年09月20日 14:34:19
-->
<template>
  <div>
    <div class="search">
      <a-space>
        <a-input v-model:value="search.userName" placeholder="用户名检索" />
        <a-button type="primary" @click="serch">
          <template #icon>
            <search-outlined />
          </template>
          检索
        </a-button>
        <a-button type="primary" danger @click="del">
          <template #icon>
            <delete-outlined />
          </template>
          删除
        </a-button>
      </a-space>
    </div>

    <a-table bordered rowKey="id" :columns="columns" :data-source="tableData" :pagination="pagination" :row-selection="{ selectedRowKeys: form.selectedRowKeys, onChange: onSelectChange}" :scroll="{ y: 600 }">
      <template #bodyCell="{ column,text, record }" >
        <template v-if="column.key === 'userName'">
          <template v-if="$isNewDataByTime(record.createTime)">
            <alert-filled :style="{ color: '#eb2f96' }" /> <span :style="{ color: '#eb2f96' }">{{text}}</span>
          </template>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-space>
            <a-button type="primary" danger @click="delRow(record)">
              <template #icon>
                <delete-outlined />
              </template>
              删除
            </a-button>
          </a-space>
        </template>
        <template v-else>
          <span>{{text}}</span>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script>
import {
  FrownOutlined,
  SmileOutlined,
  AlertFilled,
  DeleteOutlined,
  SearchOutlined,
  EyeOutlined
} from "@ant-design/icons-vue";
import { pageList, remove } from "@/api/sysLoginLogApi.ts";
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import {} from "vue-router";
import {} from "vuex";
import { message } from "ant-design-vue";
export default defineComponent({
  name: "sysLoginLog",
  props: {},
  emits: [],
  setup(props, context) {
    const columns = [
      {
        title: "用户名",
        dataIndex: "userName",
        key: "userName"
      },
      {
        title: "用户编码",
        dataIndex: "userCode",
        key: "userCode"
      },
      {
        title: "IP",
        dataIndex: "ip",
        key: "ip"
      },
      {
        title: "IP地址",
        dataIndex: "ipAddress",
        key: "ipAddress"
      },
      {
        title: "操作系统",
        dataIndex: "os",
        key: "os"
      },
      {
        title: "浏览器",
        dataIndex: "browser",
        key: "browser"
      },
      {
        title: "登录时间",
        dataIndex: "createTime",
        key: "createTime"
      },
      {
        title: "操作",
        key: "action",
        align: "center"
      }
    ];
    const pagination = {
      current: 1,
      pageSize: 10,
      showSizeChanger: true,
      total: 0,
      showTotal: (total, range) => {
        return `${range[0]}-${range[1]} 共 ${total} 条数据`;
      },
      onChange: (page, pageSize) => {
        data.pagination.current = page;
        data.pagination.pageSize = pageSize;
        initPageList();
      }
    };

    const search = {
      userName: "",
    };

    const data = reactive({
      columns,
      pagination,
      search,
      tableData: null,
      form: {
        selectedRowKeys: [],
        selectedRows: [],
      }
    }); //里面写所有的响应式数据，像vue2中的data一样

    // 初始化表格列表
    let initPageList = () => {
      let params = {
        current: pagination.current,
        size: pagination.pageSize,
        userName: search.userName,
      };
      pageList(params).then(resd => {
        data.tableData = resd.records;
        data.pagination.total = resd.total;
      });
    };
    /* 创建全选 */
    const onSelectChange = (selectedRowKeys, selectedRows) => {
      data.form.selectedRowKeys = selectedRowKeys;
      data.form.selectedRows = selectedRows;
    };


    /*删除数据 */
    let del = () => {
      // 1、判断是否选择了一个
      if (data.form.selectedRowKeys.length == 0) {
        message.warning("删除操作至少选择一行数据");
        return false;
      }
      let params = data.form.selectedRowKeys;
      remove(params).then(resd => {
        message.success(`${resd} 条数据已删除`);
        initPageList();
      });
    };
    /*删除行数据 */
    let delRow = row => {
      let params = [row.id];
      remove(params).then(resd => {
        message.success(`${resd} 条数据已删除`);
        initPageList();
      });
    };

    // 检索
    let serch = () => {
      pagination.current = 1;
      initPageList();
    };
    // 页面初始化
    onMounted(() => {
      initPageList(); // 初始化表格
    });

    return {
      ...toRefs(data),
      onSelectChange,
      del,
      delRow,
      serch
    };
  },
  components: {
    EyeOutlined,
    FrownOutlined,
    SmileOutlined,
    AlertFilled,
    DeleteOutlined,
    SearchOutlined
  }
});
</script>

<style scoped>
.crud,
.search {
  margin-bottom: 10px;
}
</style>